import type { Meta, StoryObj } from '@storybook/vue3-vite'

import { fn } from 'storybook/test';

import { NMention } from 'naive-ui';

const meta = {
    title: 'Navie UI/NMention',
    component: NMention,
    tags: ['autodocs'],
    argTypes: {
        options: { 
            description: 'The list of options to display in the mention dropdown.',
            control: 'object',
        },
        type: {
            description: 'Defines the type of the mention input, which can be either a single-line text input or a multi-line textarea.',
            control: 'select',
            options: ['text', 'textarea'],
        },
        prefix: {
            control: 'multi-select',
            options: ['@', '#', '$', '%', '&'],
            description: 'The characters that trigger the mention dropdown when typed.',
        },
        disabled: {
            description: 'Disables the mention input when set to true.',
            control: 'boolean',
        },
        loading: {
            description: 'Shows a loading indicator in the mention dropdown when set to true.',
            control: 'boolean',
        },
        status: {
            control: 'select',
            options: ['error', 'warning', 'success', undefined],
            description: 'The validation status of the mention input, which affects its border color and icon.',
        },
        onSelect: { 
            description: 'Event handler called when an option is selected from the mention dropdown.',
            action: 'selected',
        },
    },
    args: {
        options: [],
        type: 'text',
        prefix: ['@'],
        separator: ' ',
        disabled: false,
        loading: false,
        status: undefined,
        onSelect: fn(),
    },
} satisfies Meta<typeof NMention>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        options: [
            { label: 'Alice', value: 'alice' },
            { label: 'Bob', value: 'bob' },
        ],
    },
};

export const DollarPrefix: Story = {
    args: {
        ...Default.args,
        prefix: ['$'],
        options: [
            { label: 'Alice', value: '{alice}' },
            { label: 'Bob', value: '{bob}' },
        ],
    }
};


export const UnderlineSeparator: Story = {
    args: {
        ...Default.args,
        separator: '_',
    }
};
